<template>
  <div class="section-wrap" id="b">
    <div class="headerBox">
    <div class="header">
        <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>整改通知单详情
    </div>
    </div>
    <div class="form-section" style="margin-top: 40px;">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>被考核单位</label>
        </div>
        <div>
          <input type="text"
                 v-model="detailinfo.departName"
                 disabled>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>通知书编号</label>
        </div>
        <input type="text"
               v-model="detailinfo.noticeNo"
               disabled>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>业主项目经理</label>
        </div>
        <div>
          <input type="text"
                 v-model="detailinfo.charge"
                 disabled>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>监理项目部</label>
        </div>
        <div>
          <input type="text"
                 v-model="detailinfo.superDepartName"
                 disabled>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>施工项目部</label>
        </div>
        <div>
          <input type="text"
                 v-model="detailinfo.constDepartName"
                 disabled>
        </div>
      </div>
    </div>
    <div class="form-section">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查时间</label>
        </div>
        <div v-if="detailinfo.checkDate">
          <p>{{detailinfo.checkDate.substring(0, 10)}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查地点</label>
        </div>
        <div>
          <input type="text"
                 v-model="detailinfo.checkAdress" disabled>
        </div>
        <!--<group>
          <popup-picker :data="accopt"
                        placeholder='请输入'
                        v-model="detailinfo.checkAdress"
          ></popup-picker>
        </group>-->
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>整改责任人</label>
        </div>
        <div>
          <input type="text"
                 v-model="detailinfo.rectificationZrrName"
                 disabled>
        </div>
        <!--<group>
          <popup-picker :data="accopt"
                        placeholder='请选择'
                        v-model="detailinfo.rectificationZrrName"
          ></popup-picker>
        </group>-->
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>抄送接收人</label>
        </div>
        <div>
          <input type="text"
                 v-model="detailinfo.receiveName"
                 disabled>
        </div>
      </div>
      <div class="form-item form-item-style2">
        <div class="label-title">
          <label>检查范围和内容</label>
        </div>
        <div>
            <textarea
              v-model="detailinfo.checkContent"
              disabled></textarea>
        </div>
      </div>
    </div>
    <ul class="details_list">
      <li>
        <div>
          <h3>
            <span>问题项:项</span>
            <x-icon type="ios-arrow-up"
                    size="22"
                    class="icon-up"></x-icon>
          </h3>
        </div>
        <div style="height: auto">
          <div style="background: white">
            <el-tree
              :data="question"
              node-key="id"
              :default-checked-keys='checkedList'
              ref="tree"
              :props="def"
            >
              <div class="custom-tree-node" slot-scope="{node,data}"
                   style="display: flex;justify-content: space-between;width: 100%">
                <span @click="nodeClick(data)">{{node.label}}</span>
                <!--<span v-if="data.type=='human'" >
                  <el-checkbox></el-checkbox>
                </span>-->
              </div>
            </el-tree>
          </div>
        </div>
      </li>
    </ul>
    </li>
    </ul>
    <div class="addPlan_select" v-if="flag">
      <ul class="planSel_list">
        <li>
          <div class="form-item form-item-style1">
            <div>
              <label style="font-size: 14px">整改要求</label>
            </div>
            <div>
                    <textarea placeholder="请输入回复（自行换行)"
                              v-model="obj.rectificationCs"
                    ></textarea>
            </div>
          </div>
        </li>
        <li>
          <div class="form-item form-item-style1">
            <div>
              <label style="font-size: 14px">整改时间</label>
            </div>
            <group>
              <datetime v-model="obj.rectificationDate"></datetime>
            </group>
          </div>
        </li>
        <!--        <li>
                  <div class="btns" style="padding: 0;">
                    &lt;!&ndash; <button>保存</button> &ndash;&gt;
                    <button  @click="addQuerst"
                             class="green">确认
                    </button>
                  </div>
                </li>-->
      </ul>

    </div>
    <!--<div class="btns">
      &lt;!&ndash; <button>保存</button> &ndash;&gt;
      <button @click="handleSubmit"
              class="green width200">确认
      </button>
    </div>-->
    <div v-transfer-dom>
      <popup v-model="classValue" width="100%">
        <select-depart @nodeClick='selectedDepart' @selectUser='selectUser'></select-depart>
      </popup>
    </div>
    <div id="aaa" v-if="nodeType">
      <div class="box">
        <div class="planSel_list" style="height: auto;padding-top: 40px;">
          <ul class="tree-span">
            <!--
                      <li v-for="(keyName,index) in questionKeyList" :key="index" ><el-checkbox v-model="keyName.id" @click="aaa"></el-checkbox> {{keyName.keyRequire}}</li>
            -->
            <el-checkbox-group v-model="ids">
              <el-checkbox v-for="(keyName,index) in questionKeyList" :key="index" :lable="keyName.standardId" disabled>
                <span @click="showRisk(keyName)">{{keyName.keyRequire}}</span>
              </el-checkbox>

            </el-checkbox-group>
          </ul>
          <div class="btns_div">
            <a class="cancelBtn" @click="clickClose(1)">关闭</a>
          </div>
        </div>
      </div>

    </div>
    <div v-transfer-dom>
      <popup v-model="keyrequire" width="100%" position="bottom" height="80%" :popup-style="{'z-index':'600'}" should-rerender-on-show>
        <Standard :dataDetail="recordItem" @nodeClick="closeKeyrequire" :canAudit="false"></Standard>
      </popup>
    </div>
  </div>
</template>
<script>
  import upload from '@/commonComponents/upload/index'
  import selectDepart from "@commonComponents/selectUser/selectUser";
  import Standard from "@/commonComponents/treeClassify/standard1.vue";
  import {
    XHeader,
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    TransferDom,
    Popup
  } from "vux";
  import Popover from "vux/src/components/popover/index";

  export default {
    directives: {
      TransferDom
    },
    name: 'brankAbarbeitung',
    data() {
      return {
        keyrequire: false,
        recordItem: {},
        qusertionList: [],
        questionList: [],
        nodeType: false,
        obj: {
          id: "",
          questionDescribr: "",
          rectificationCs: "",
          rectificationDate: "",
        },
        def: {
          children: 'children',
          label: "quantizeName",
        },
        classValue2: true,
        ids: [],
        addFlag: true,
        flag: false,
        type: null,
        classValue: false,
        array: [],
        arritem: [],
        isDisabled: false,
        accopt: [['单位一', '单位二']],//通知书接收单位
        accoptVal: ['单位一'],
        accopt1: [['是', '否']],
        detailinfo: {},
        questionKeyList: [],
        question: [],
        checkedList: [],
      }
    },
    components: {
      Popover,
      upload, selectDepart,
      Popup,
      Standard
    },
    created() {
      this.getInfo()
      //this.questionList()
      this.GetQuestionClassity()
      console.log(this.question)
    },
    methods: {
      goBack(){
        this.$router.go(-1)
      },
      handleCheck(value) {
        if (this.ids.indexOf(value) >= 0) {
          this.ids.splice(this.ids.indexOf(value), 1)
        } else {
          this.ids.push(value)
        }
      },
      getInfo() {
        let id = this.$route.query.id;
        this.$axiosAjax.rectificationDetail({rectificationId: id}).then((res) => {
          if(res.data.success == true) {
            this.detailinfo = res.data.result
            this.ids = res.data.result.qusertionIds
            this.ids.unshift(undefined)
          }
        }).catch(
          (err) => {

          }
        )

      },
      showRisk (data) {
        this.keyrequire = true
        this.recordItem = data
      },
      closeKeyrequire() {
        this.keyrequire = false;
      },
      nodeClick(data) {
        let id = this.$route.query.recordId;
        this.$axiosAjax.H5GetQusetionItems({recordId: id, classifyId: data.id, infoId: this.$route.query.id,isaddoredit:'0'}).then((res) => {
          if (res.data.success == true) {
            this.questionKeyList = res.data.result
            if (res.data.result != null && res.data.result.length > 0) {
              this.nodeType = true
            }
          }
        }).catch(
          (err) => {

          }
        )

      },
      clickClose(data) {
        this.nodeType = false
        if (data == 0) {
          this.ids = []
        }
      },
      selectedDepart(data) {
        this.classValue = false;
      },
      addQuerst() {
        if (this.obj.rectificationCs == null) {
          alert("整改要求不能为空")
          return;
        }
        if (this.obj.rectificationDate == null) {
          alert("整改时间不能为空")
          return;
        }
        this.flag = !this.flag
        this.qusertionList.push(this.obj)
        console.log(JSON.stringify(this.qusertionList))
        this.obj = {}
      },
      queryUser(num) {
        this.classValue = true;
        this.type = num
      },
      selectUser(data) {
        if (this.type == 0) {
          this.detailinfo.rectificationZrrName = data.userName
          this.detailinfo.rectificationZrrId = data.id
        } else {
          this.detailinfo.receiveName = data.userName
          this.detailinfo.receiveId = data.id
        }
        this.classValue = false;
      },
      /* questionList() {
         let id = this.$route.query.recordId;
         this.$axiosAjax.GetRecordQuestion({parentId: id,maxResultCount:100}).then((res) => {
           if (res.data.success == true) {
             this.question = res.data.result.items;
             let info = res.data.result.items;
             let arr = [];
             let arritem = [];
             if (info != null && info.length != 0) {
               for (let i = 0; i < info.length; i++) {
                 arr.push(info[i].quantizeName)
                 arritem.push(info[i].itemType)
               }
             }
             this.array = new Set(arr)
             this.arritem = new Set(arritem)
           }
         }).catch(
           (err) => {

           }
         )

       },*/
      GetQuestionClassity() {
        let id = this.$route.query.recordId;
        let classify = this.$route.query.classifyId
        this.$axiosAjax.GetQuestionClassity({recordId: id, classifyId: classify}).then((res) => {
          if (res.data.success == true) {
            /*this.question=[{
              'name': '总经办',
              'type': 'department',
              'checked': false,
              'children': [
                {
                  'name': '总经理',
                  'type': 'human',
                  'checked': false,
                  'children': []
                },
                {
                  'name': '财务总监',
                  'type': 'human',
                  'checked': false,
                  'children': []
                },
                {
                  'name': '秘书处',
                  'type': 'department',
                  'checked': false,
                  'children': [
                    {
                      'name': '秘书1',
                      'type': 'human',
                      'checked': false,
                      'children': []
                    },
                    {
                      'name': '秘书2',
                      'type': 'human',
                      'checked': false,
                      'children': []
                    }
                  ]
                }
              ]
            },
              {
                'name': '营销中心',
                'type': 'department',
                'checked': false,
                'children': [
                  {
                    'name': '营销总监',
                    'type': 'human',
                    'checked': false,
                    'children': []
                  },
                  {
                    'name': '营销一部',
                    'type': 'department',
                    'checked': false,
                    'children': [
                      {
                        'name': '营销一部经理',
                        'type': 'human',
                        'checked': false,
                        'children': []
                      },
                      {
                        'name': '营销员A',
                        'type': 'human',
                        'checked': false,
                        'children': []
                      }
                    ]
                  }
                ]
              },
              {
                'name': '未分组人员',
                'type': 'human',
                'checked': false,
                'children': []
              }]*/

            this.question = res.data.result;
            /*let info = res.data.result;
            let arr = [];
            let arritem = [];
            if (info != null && info.length != 0) {
              for (let i = 0; i < info.length; i++) {
                arr.push(info[i].quantizeName)
                arritem.push(info[i].itemType)
              }
            }
            this.array = new Set(arr)
            this.arritem = new Set(arritem)*/
          }
        }).catch(
          (err) => {

          }
        )

      },

    },
    watch: {
      "questionList": function () {
        // this.getAssessmentPlan()
      },
    }
  }
</script>
<style>
  .el-tree-node__content {
    min-height: 60px;
    height: auto;
  }

  .tree-span .el-checkbox__label {
    display: inline-block;
    width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .tree-span .el-checkbox + .el-checkbox {
    margin: 0 !important;
  }

  .tree-span .el-checkbox {

    display: flex;
    align-items: center;
    padding-bottom: 10px !important;
  }

  .el-checkbox__input.is-disabled + span.el-checkbox__label {

    color: #333 !important;
  }

</style>
<style lang="less" scoped>
  #b {
    position: relative;
    #aaa {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      .box {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        position: relative;
        .planSel_list {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 90%;
          margin: 0 auto;
          height: 200px;
          border-radius: 15px;
          padding: 10px;
          transform: translate(-50%, -50%);
          background-color: #fff;
          .btns_div {

            justify-content: space-around;
            display: flex;
            margin: 20px auto;
            a {
              height: 20px;
              border-radius: 20px;
              display: inline-block;
              width: 70px;
              text-align: center;
              line-height: 20px;
              color: #fff;
            }
            .submitBtn {
              background: #469b7a;
            }
            .cancelBtn {
              background: #ffb400;
            }
          }
        }
      }

    }
  }

  .el-checkbox {
    z-index: 1000;
  }

  .details_list {
    background: #fff;
    margin-bottom: 10px;
    h3 {
      span {
        color: #226afd;
      }
    }
    .cc {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
    .vux-x-icon {
      fill: #999;
      float: right;
      margin-top: 16px;
    }
    li {
      position: relative;
      > div {
        position: relative;
        height: 54px;
        line-height: 54px;
        padding-right: 20px;
      }
      .checkbox {
        background: url(../../../static/images/checkbox.png) no-repeat left center;
        background-size: 16px 16px;
        padding-left: 28px;
        height: 100%;
        float: left;
        max-width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        &.active {
          background: url(../../../static/images/checked.png) no-repeat left center;
          background-size: 16px 16px;
        }
      }
      i {
        position: absolute;
        right: 34px;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        padding: 8px 5px;
        background: #226afd;
        border-radius: 50%;
        font-size: 12px;
        color: #fff;
        line-height: 0;
      }
    }
    > li {
      justify-content: space-between;
      padding-left: 20px;
      // border-bottom: 5px solid #ebeef2;
      > div {
        font-weight: bold;
        font-size: 16px;
        border-top: 1px solid #ebeef2;
      }
      .list_2 {
        li {
          border-top: 1px solid #ebeef2;
          > div {
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
      .list_3 {
        li {
          font-size: 14px;
          // text-indent: 2em;
          padding-left: 20px;
          height: 55px;
          line-height: 54px;
          border-top: 1px solid #ebeef2;
          padding-right: 20px;
        }
      }
    }
  }

  .addPlan_select {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    .planSel_list {
      width: 100%;
      margin: 0 auto;
      padding-top: 150px;
      li {
        height: 57px;
        line-height: 57px;
        padding-left: 10px;
        background: #fff;
        color: #469b7a;
        font-size: 14px;

      }
    }
  }
</style>
